<template>
  <div id="main">
    <br><center>
    <button type = "button"
            class="btn btn-sm btn-primary color"
            data-toggle="modal"
            data-target="#addModal" @click="add()">图书报丢
    </button></center>
    <br>
    <hr>
    <br>
    <table class="table table-striped table-hover">
      <tr>
        <td width="100"> 序号 </td>
        <td width="100">  丢失原因  </td>
        <td width="200"> 丢失书籍  </td>

      </tr>
      <tr v-for="(item,index) in list.slice((current-1)*size,current*size)">
        <td width="100"> {{index+1}} </td>
        <td width="100">{{item.reason}}</td>
        <td width="200"> {{item.book.name}} </td>
        <td><button type = "button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#reModal"  @click="update(item)">修改</button>
          <button type = "button" class="btn btn-link btn-sm" @click="del(item.id)">删除</button></td>
      </tr>
    </table>

    <Page :total="total" :allPage="allpage" v-on:change="changePage"></Page>


    <div class="modal fade" id="addModal"  aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title"><center>添加</center></h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            丢失原因：<input type="text" v-model="obj.reason"><br>

            丢失图书：
            <select type="text"  v-model="obj.book"  placeholder="请选择" >
              <option  v-for="item in blist" :value="item">{{item.name}}</option>
            </select><br>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click = "okadd()">提交</button>
          </div>
        </div>
      </div>

    <div class="modal fade" id="reModal"  aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">修改</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            丢失原因：<input type="text" v-model="obj.reason"><br>

            丢失图书：
            <select type="text"  v-model="obj.book"  placeholder="请选择" >
              <option  v-for="item in blist" :value="item">{{item.name}}</option>
            </select><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click = "okupdate()">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import axios from 'axios';
    import Page from '@/publicComponent/Page';

    export default {
        name: "MBookloss",
        components:{
            Page
        },
        data: function () {
            return  {
                url:this.baseURL+'bookloss.ctl',
                burl :this.baseURL+'book.ctl',
                list:[],

                blist:[],//图书下拉
                obj:{},//添加或修改的一个对象
                name:'',
                size:4,//每页显示个数
                current:1,//当前显示页
                total:0,//总记录数
                allpage:0,//总页数
            }
        },
        created(){
            this.getList();
            var arr = this;
            axios.get(this.url).then((res) => {
                this.list=res.data;
            })
        },
        methods:{

            getList(){
                axios.get(this.url).then((res) => {
                    this.list=res.data;
                    this.total=this.list.length
                    this.allpage=Math.ceil(this.total/this.size)
                })
            },

            del:function(id){
                axios.delete(this.url, {
                    params: {
                        id: id
                    }
                }).then(res => {
                    alert(res.data.message);
                    this.getList()
                })
            },

            add:function(){

                axios.get(this.burl).then((res) => {
                    this.blist=res.data;
                })
            },

            okadd:function(){
                this.axios.post(this.url,this.obj)
                    .then((res) => {
                        alert("添加成功");
                        this.getList();
                        this.obj={};
                    })
                $("#addModal").modal('hide');
            },

            update:function(reobj){
                this.obj=reobj;
                axios.get(this.burl).then((res) => {
                    this.blist=res.data;
                })

            },
            okupdate:function(){
                axios.put(this.url,this.obj)
                    .then(res=>{
                        alert("修改成功");
                        this.obj={};
                    })
                $("#reModal").modal('hide');
            },
            changePage:function(index){
                this.current = index;
            }
        }

    }
</script>

<style scoped>
  .color{background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
